<template>
	<view class="container">
		<view class="search-section">
			<view class="search-input-wrapper">
				<text class="iconfont icon-search" style="color: #9CA4AF;font-size: 20px;"></text>
				<input type="text" placeholder="搜索软件..." class="search-input" @click="goSearch" />
			</view>
		</view>
		<swiper style="margin: 20rpx 30rpx;height: 260rpx;" autoplay :interval="500000">
			<swiper-item v-for="item in softwareList.slice(0,3)" @click="toDetails(item.id)" :key="item.id">
				<view class="carousel-card">
					<view style="display: flex;flex-direction: column;">
						<text class="carousel-title">今日推荐</text>
						<text class="carousel-desc">{{item.title}}</text>
						<text class="carousel-tag">免费下载</text>
					</view>
					<view
						style="display: flex;flex-direction: column;align-items: center;justify-content: space-between;">
						<image class="software-icon-wrapper" :src="getFullImageUrl(item.mainImageUrl)" mode=""></image>
						<text class="iconfont icon-right" style="font-weight: 600;" />
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="category-section">
			<text class="section-title">软件分类</text>
			<view class="category-grid">
				<view class="category-card" :style="{ backgroundColor: item.bg || '#f2f2f2' }"
					v-for="item in categoryList" @click="toCategory(item.name)" :key="item.id">
					<text class="category-text">{{item.name}}</text>
				</view>
			</view>
		</view>
		<view class="hot-software-section">
			<view class="hot-software-header">
				<text class="section-title">热门软件</text>
				<text class="view-more-text">查看更多</text>
			</view>
			<scroll-view style="background-color: #F0F0F0;">
				<view class="software-card" v-for="item in softwareList" @click="toDetails(item.id)" :key="item.id">
					<image class="software-icon-wrapper" :src="getFullImageUrl(item.mainImageUrl)" mode=""></image>
					<view class="software-info">
						<view style="display: flex;gap: 20rpx;align-items: center;">
							<text class="software-name">{{item.title}}</text>
							<view v-if="item.isOfficial" style="font-size: 12px;width: 130rpx;height: 35rpx;background-color: #4E6EF2;
							text-align: center;line-height: 35rpx;color: #fff;border-radius: 10rpx;">官方正版</view>
						</view>
						<text class="software-desc">{{item.description}}</text>
						<view class="">
							<tui-rate active="#FACC15" :size="15" :current="item.rating" disabled
								:score="item.rating" />
							<text style="font-size: 12px;color: #9ca3af;margin-left: 5rpx;">{{item.rating}}分</text>
							<text style="font-size: 12px;color: #9ca3af;margin-left: 25rpx;">{{item.pkgSize}}</text>
							<text style="font-size: 12px;color: #9ca3af;margin-left: 25rpx;">{{item.dcount}}次下载</text>
						</view>
					</view>
				</view>
				<view style="text-align: center;padding: 20rpx;color: #999;font-size: 14px;">
					<text v-if="pageInfo.loading" class="loading-text">正在加载...</text>
					<text v-if="pageInfo.noMore" class="loading-text">没有更多了</text>
				</view>
			</scroll-view>
		</view>
		<!-- <view style="width: 80rpx;height: 80rpx;background-color: #6B7280;position: fixed;bottom: 200rpx;right: 100rpx;border-radius: 50%;
			display: flex; justify-content: center;align-items: center;" @click="goPublish">
			<text class="iconfont icon-fabusekuai" style="color: #06A7FF;font-size: 20px;" />
		</view> -->
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import api from '@/utils/api.js'
	import {
		onShareAppMessage,
		onShareTimeline,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		baseConfig
	} from '@/utils/request.js';


	const categoryList = [{
			name: '办公软件',
			bg: '#10b981'
		},
		{
			name: '图像处理',
			bg: '#ef4444'
		},
		{
			name: '系统软件',
			bg: '#f97316'
		},
		{
			name: '编程工具',
			bg: '#ec4899'
		},
		{
			name: '脚本代码',
			bg: '#0CEFB8'
		},
		{
			name: '免费游戏',
			bg: '#3b82f6'
		},
		{
			name: '脚本代码',
			bg: '#14b8a6'
		},
		{
			name: '其他软件',
			bg: '#6b7280'
		}
	];

	// --- 分页相关状态 ---
	const pageInfo = reactive({
		page: 1, // 当前页码
		pageSize: 10, // 每页数量
		loading: false, // 是否正在加载
		noMore: false // 是否没有更多数据了
	});

	const softwareList = ref([{
		"id": 1,
		"title": "uniapp",
		"description": "这是跨段开发工具",
		"code": "4814",
		"rating": 6.4,
		"pkgSize": "10MB",
		"tags": "ce,de,po",
		"mainImageUrl": "logo.png",
		"updatedAt": "2025-10-11T03:57:06.000+00:00",
		"dcount": 10
	}])

	// 定义一个方法来拼接完整的图片URL
	const getFullImageUrl = (url) => {
		if (url == '') {
			return '/static/logo.jpg'
		} else {
			return baseConfig.baseURL + '/api/images/' + url;
		}
	};

	// --- API请求方法 ---
	const getCarList = async (isReload = false) => {
		if (pageInfo.loading || (pageInfo.noMore && !isReload)) {
			return; // 正在加载或没有更多数据时，直接返回
		}
		pageInfo.loading = true;
		try {
			const params = {
				pageNum: pageInfo.page,
				pageSize: pageInfo.pageSize,
			};
			// 发起API请求
			const res = await api.app.getList(params);
			// console.log(res.total);
			if (res.total > 0) {
				const newRecords = res.records;
				if (isReload) {
					softwareList.value = newRecords; // 重新加载时，直接覆盖数据
				} else {
					softwareList.value = softwareList.value.concat(newRecords); // 下拉加载时，合并新数据
				}
				if (newRecords.length < pageInfo.pageSize) {
					pageInfo.noMore = true;
				} else {
					pageInfo.noMore = false;
				}
			} else {
				// 处理非预期的数据结构，防止程序崩溃
				// console.warn('API返回的数据结构不符合分页预期，按非分页模式处理。');
				// softwareList.value = res.records || [];
				pageInfo.noMore = true; // 假设一次性加载，不再继续
			}
		} catch (e) {
			console.error('获取软件列表失败', e);
		} finally {
			pageInfo.loading = false;
		}
	};

	onMounted(() => {
		// 初次调用
		getCarList(true);
	})

	// 监听页面滚动到底部
	onReachBottom(() => {
		if (pageInfo.noMore) {
			return; // 没有更多数据时，不触发加载
		}
		pageInfo.page++; // 页码+1
		getCarList(); // 加载下一页数据
	});

	const goSearch = () => {
		uni.navigateTo({
			url: '/pages/search/search'
		});
	};
	const goPublish = () => {
		uni.navigateTo({
			url: '/pages/publish/publish'
		});
	};
	const toDetails = (id) => {
		uni.navigateTo({
			url: `/pages/detail/detail?id=${id}`
		});
	};

	const toCategory = (text) => {
		uni.navigateTo({
			url: `/pages/category/category?category=${encodeURIComponent(text)}`,
		});
	}

	// 分享朋友
	onShareAppMessage(() => {
		return {
			title: '每日学习一款软件',
			path: '/pages/index/index'
		};
	})
	// 分享朋友圈
	onShareTimeline(() => {
		return {
			title: '每日学习一款软件',
			path: '/pages/index/index'
		};
	})
</script>

<style scoped>
	.container {
		background-color: #F0F0F0;
		min-height: 100vh;
	}

	/* 搜索框 */
	.search-section {
		padding: 20rpx 30rpx;
		background-color: #ffffff;
	}

	.search-input-wrapper {
		background-color: #f3f4f6;
		border-radius: 24rpx;
		padding: 16rpx 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 12rpx;

	}

	.search-icon {
		color: #9ca3af;
	}

	.search-input {
		flex: 1;
		border: none;
		outline: none;
		color: #374151;
		height: 100%;
	}

	/* 轮播推荐 */
	.carousel-card {
		background-image: linear-gradient(to right, #a855f7, #ec4899);
		border-radius: 32rpx;
		padding: 40rpx;
		color: #ffffff;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.carousel-title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 16rpx;
	}

	.carousel-desc {
		font-size: 28rpx;
		opacity: 0.9;
		margin-bottom: 24rpx;
	}

	.carousel-tag {
		background-color: rgba(255, 255, 255, 0.2);
		padding: 8rpx 20rpx;
		width: 100rpx;
		border-radius: 9999rpx;
		font-size: 12px;
	}

	/* 分类网格 */
	.category-section {
		padding: 10rpx 30rpx 20rpx;
		/* background-color: #fff */
	}

	.section-title {
		font-size: 18px;
		font-weight: bold;
		color: #1f2937;
	}

	.category-grid {
		margin-top: 20rpx;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 32rpx;
	}

	.category-card {
		border-radius: 20rpx;
		padding: 30rpx 0;
		color: #ffffff;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.category-text {
		font-size: 24rpx;
		font-weight: 500;
	}

	/* 热门软件 */
	.hot-software-section {
		padding: 20rpx 30rpx;
	}

	.hot-software-header {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.view-more-text {
		font-size: 28rpx;
		color: #4f46e5;
	}

	.software-card {
		background-color: #ffffff;
		border-radius: 32rpx;
		padding: 30rpx;
		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 24rpx;
		margin-bottom: 20rpx;
	}

	.software-icon-wrapper {
		width: 96rpx;
		height: 96rpx;
		border-radius: 24rpx;
	}

	.software-info {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.software-name {
		font-size: 15px;
		font-weight: 600;
		color: #1f2937;
	}

	.software-desc {
		font-size: 28rpx;
		color: #6b7280;
	}
</style>